La direction des éléments

Flexbox utilise deux axes pour disposer les éléments. L'axe principal (main axis) peut être horizontal ou vertical, selon la direction souhaitée. L'axe transversal (cross axis) est perpendiculaire à l'axe principal.

La propriété flex-direction permet de spécifier la direction de l'axe principal. Elle peut prendre les valeurs suivantes :

• row : Les éléments sont disposés horizontalement de gauche à droite.
• column : Les éléments sont disposés verticalement de haut en bas.
• row-reverse : Les éléments sont disposés horizontalement de droite à gauche.
• column-reverse : Les éléments sont disposés verticalement de bas en haut.

Remarque : par défaut avec flex, les éléments sont alignés horizontalement ; il n’est donc pas nécessaire de préciser dans le fichier style.css l’instruction flex-direction : row.